import { defineStore } from 'pinia';
import { ref } from 'vue';

export interface ThemeConfig {
  primaryColor: string;
  borderRadius: string;
  fontSize: string;
}

export const useThemeStore = defineStore('theme', () => {
  const theme = ref<ThemeConfig>({
    primaryColor: '#1890ff',
    borderRadius: '4px',
    fontSize: '14px',
  });

  const updateTheme = (newTheme: Partial<ThemeConfig>) => {
    theme.value = { ...theme.value, ...newTheme };
    applyTheme();
  };

  const applyTheme = () => {
    const root = document.documentElement;
    root.style.setProperty('--primary-color', theme.value.primaryColor);
    root.style.setProperty('--border-radius', theme.value.borderRadius);
    root.style.setProperty('--font-size', theme.value.fontSize);
  };

  return {
    theme,
    updateTheme,
  };
}); 